<template>
	<view class="container">
		<!-- 顶部信息卡片 -->
		<view class="info-card">
			<view class="card-header">
				<view class="student-basic">
					<text class="student-name">{{ student.name || '加载中...' }}</text>
					<text
						:class="['student-status', {'status-active': student.status === 1, 'status-inactive': student.status === 0}]">
						{{ student.status === 1 ? '在读' : '退学' }}
					</text>
				</view>
				<view class="actions">
					<view class="action-item edit-button" @click="handleEdit">
						<uni-icons type="compose" size="20" color="#1890ff"></uni-icons>
						<text>编辑</text>
					</view>
				</view>
			</view>

			<view class="student-info-wrapper">
			<view class="info-section">
					<view class="info-item grade-class-row">
						<view class="grade-class-item">
							<text class="info-label">年级：</text>
							<text class="info-value">
								<text class="grade-tag">{{ student.grade || '未填写' }}</text>
							</text>
				</view>
						<view class="grade-class-item">
							<text class="info-label">班级：</text>
							<text class="info-value">
								<text class="class-tag">{{ student.class ? student.class + '班' : '未填写' }}</text>
							</text>
						</view>
					</view>
					<view class="info-item parent-info-row">
						<view class="parent-info-item">
					<text class="info-label">家长姓名：</text>
							<text class="info-value">
								<text class="parent-name-tag">{{ student.parent_name || '未填写' }}</text>
							</text>
				</view>
						<view class="parent-info-item">
					<text class="info-label">联系电话：</text>
							<text class="info-value phone-value">
								<text class="parent-phone-tag">{{ student.parent_phone || '未填写' }}</text>
								<uni-icons v-if="student.parent_phone" class="phone-icon" type="phone" size="20"
									color="#16A085" @click="callPhone"></uni-icons>
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 选项卡 -->
		<view class="tabs">
			<view v-for="(tab, index) in tabs" :key="index" :class="['tab-item', { active: activeTab === index }]"
				@click="activeTab = index">
				<text>{{ tab.label }}</text>
			</view>
		</view>

		<!-- 内容区域 -->
		<swiper class="content-swiper" :current="activeTab" @change="onSwiperChange"
			:style="{ height: contentHeight + 'px' }">
			<!-- 已报课程 -->
			<swiper-item>
				<scroll-view scroll-y="true" class="tab-content" show-scrollbar="true">
					<view v-if="courses.length === 0" class="empty-content">
						<image src="/static/empty.png" mode="aspectFit" class="empty-image"></image>
						<text>暂未报名任何课程</text>
						<button class="action-button" @click="navigateToEnroll">去报名</button>
					</view>

					<view v-else class="course-list">
						<view v-for="(course, index) in courses" :key="course._id || index" class="course-item"
							@click="navigateToCourseDetail(course.course_id)">
							<view class="course-info">
								<view class="course-name-row">
									<text class="course-name">{{ course.course?.name || '未知课程' }}</text>
									<text :class="['course-fee', course.remaining_fee > 0 ? 'fee-unpaid' : 'fee-paid']">
										{{ course.remaining_fee > 0 ? '未缴清' : '已缴清' }}
									</text>
								</view>

								<view class="course-time">
									<text>{{ formatDateRange(course.course?.start_date, course.course?.end_date) }}</text>
								</view>

								<view class="course-fee-info">
									<text>应缴：{{ formatFee(course.fee) }}</text>
									<text>已缴：{{ formatFee(course.paid_amount) }}</text>
									<text>剩余：{{ formatFee(course.remaining_fee) }}</text>
								</view>
							</view>
							<uni-icons type="right" size="16" color="#999"></uni-icons>
						</view>
					</view>
				</scroll-view>
			</swiper-item>

			<!-- 考勤记录 -->
			<swiper-item>
				<scroll-view scroll-y="true" class="tab-content" show-scrollbar="true">
					<view class="filter-grid">
						<picker mode="date" :value="attendanceQuery.start_date" @change="onAttendanceStartDateChange">
							<view class="date-picker">
								<text class="date-text">{{ attendanceQuery.start_date || '起始日期' }}</text>
								<view class="date-icon">
								<uni-icons type="calendar" size="14" color="#666"></uni-icons>
								</view>
							</view>
						</picker>
						<text class="date-separator">至</text>
						<picker mode="date" :value="attendanceQuery.end_date" @change="onAttendanceEndDateChange">
							<view class="date-picker">
								<text class="date-text">{{ attendanceQuery.end_date || '结束日期' }}</text>
								<view class="date-icon">
								<uni-icons type="calendar" size="14" color="#666"></uni-icons>
								</view>
							</view>
						</picker>
						<button class="filter-button" @click="loadAttendance">查询</button>
					</view>

					<view v-if="attendances.length === 0" class="empty-content" style="margin-top: 4px;">
						<image src="/static/empty.png" mode="aspectFit" class="empty-image"></image>
						<text>暂无考勤记录</text>
					</view>

					<view v-else class="attendance-list">
						<view v-for="(item, index) in attendances" :key="item._id || index" class="attendance-item">
							<view class="attendance-date">
								<text>{{ formatDate(item.date) }}</text>
								<text :class="['attendance-status', 
                  item.status === 1 ? 'status-present' : 
                  item.status === 0 ? 'status-absent' : 'status-leave']">
									{{ item.status === 1 ? '出勤' : item.status === 0 ? '缺勤' : '请假' }}
								</text>
							</view>

							<view class="attendance-course">
								<text>课程：{{ getCourseNameById(item.course_id) }}</text>
							</view>

							<view v-if="item.remarks" class="attendance-remarks">
								<text>备注：{{ item.remarks }}</text>
							</view>
						</view>
					</view>

					<view v-if="attendanceSummary.total > 0" class="attendance-summary">
						<text>总计: {{ attendanceSummary.total }}次</text>
						<text>出勤: {{ attendanceSummary.present }}次</text>
						<text>缺勤: {{ attendanceSummary.absent }}次</text>
						<text>请假: {{ attendanceSummary.leave }}次</text>
						<text>出勤率: {{ attendanceSummary.presentRate }}%</text>
					</view>
				</scroll-view>
			</swiper-item>

			<!-- 缴费记录 -->
			<swiper-item>
				<scroll-view scroll-y="true" class="tab-content" show-scrollbar="true">
					<view class="filter-grid">
						<picker mode="date" :value="paymentQuery.start_date" @change="onPaymentStartDateChange">
							<view class="date-picker">
								<text class="date-text">{{ paymentQuery.start_date || '起始日期' }}</text>
								<view class="date-icon">
								<uni-icons type="calendar" size="14" color="#666"></uni-icons>
								</view>
							</view>
						</picker>
						<text class="date-separator">至</text>
						<picker mode="date" :value="paymentQuery.end_date" @change="onPaymentEndDateChange">
							<view class="date-picker">
								<text class="date-text">{{ paymentQuery.end_date || '结束日期' }}</text>
								<view class="date-icon">
								<uni-icons type="calendar" size="14" color="#666"></uni-icons>
								</view>
							</view>
						</picker>
						<button class="filter-button" @click="loadPayments">查询</button>
					</view>

					<view v-if="payments.length === 0" class="empty-content" style="margin-top: 4px;">
						<image src="/static/empty.png" mode="aspectFit" class="empty-image"></image>
						<text>暂无缴费记录</text>
						<button class="action-button" @click="navigateToPayment">去缴费</button>
					</view>

					<view v-else class="payment-list">
						<view v-for="(item, index) in payments" :key="item._id || index" class="payment-item">
							<view class="payment-header">
								<text class="payment-date">{{ formatDate(item.payment_date) }}</text>
								<text :class="['payment-status', 
                  item.status === 1 ? 'status-paid' : 
                  item.status === 2 ? 'status-partial' : 'status-unpaid']">
									{{ item.status === 1 ? '已缴费' : item.status === 2 ? '部分缴费' : '未缴费' }}
								</text>
							</view>

							<view class="payment-course">
								<text>课程：{{ getCourseNameById(item.course_id) }}</text>
							</view>

							<view class="payment-amount">
								<text>缴费金额：{{ formatFee(item.amount) }}</text>
								<text>缴费方式：{{ getPaymentMethodText(item.payment_method) }}</text>
							</view>

							<view class="payment-period">
								<text>缴费周期：{{ formatDateRange(item.period_start, item.period_end) }}</text>
							</view>

							<view v-if="item.remarks" class="payment-remarks">
								<text>备注：{{ item.remarks }}</text>
							</view>
						</view>
					</view>

					<view v-if="paymentSummary.total_amount > 0" class="payment-summary">
						<text>总计: {{ formatFee(paymentSummary.total_amount) }}</text>
						<text>缴费次数: {{ paymentSummary.count }}次</text>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		onMounted,
		getCurrentInstance
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app';

	// 页面状态
	const student = ref({});
	const courses = ref([]);
	const attendances = ref([]);
	const payments = ref([]);
	const loading = ref(false);
	const activeTab = ref(0);
	const contentHeight = ref(500);

	// 选项卡配置
	const tabs = [{
			label: '已报课程'
		},
		{
			label: '考勤记录'
		},
		{
			label: '缴费记录'
		}
	];

	// 查询参数
	const attendanceQuery = reactive({
		start_date: '',
		end_date: '',
	});

	const paymentQuery = reactive({
		start_date: '',
		end_date: '',
	});

	// 考勤统计数据
	const attendanceSummary = reactive({
		total: 0,
		present: 0,
		absent: 0,
		leave: 0,
		presentRate: 0
	});

	// 缴费统计数据
	const paymentSummary = reactive({
		total_amount: 0,
		count: 0
	});

	// 课程名称缓存
	const courseNameMap = ref({});

	// 页面初始化
	onMounted(async () => {
		// 获取页面参数
		const page = getCurrentPages();
		const query = page[page.length - 1].options || {};

		if (query.id) {
			// 将ID保存起来，以便在onShow中使用
			student.value._id = query.id;

			// 设置默认查询日期
			const now = new Date();
			const threeMonthsAgo = new Date();
			threeMonthsAgo.setMonth(now.getMonth() - 3);

			attendanceQuery.start_date = formatDateString(threeMonthsAgo);
			attendanceQuery.end_date = formatDateString(now);

			paymentQuery.start_date = formatDateString(threeMonthsAgo);
			paymentQuery.end_date = formatDateString(now);

			// 计算内容区域高度
			const res = uni.getSystemInfoSync();
			contentHeight.value = res.windowHeight - 280; // 减去顶部信息区域和选项卡的高度
			
			// 加载学生详情
			loadStudentDetail(query.id);
		}
	});

	// 每次页面显示时刷新数据（自动重新加载数据）
	onShow(() => {
		// 确保学生ID存在
		if (student.value && student.value._id) {
			console.log('页面显示，重新加载数据:', student.value._id);
			// 重新加载学生详情
			loadStudentDetail(student.value._id);
		}
	});

	// 加载学生详情
	async function loadStudentDetail(id) {
		loading.value = true;

		try {
			// 获取学生详情
			const studentCloud = uniCloud.importObject('student');
			const studentData = await studentCloud.getStudentDetail(id);
			student.value = studentData;

			// 加载报名课程信息
			loadStudentCourses(id);

			// 加载考勤记录
			loadAttendance();

			// 加载缴费记录
			loadPayments();
		} catch (error) {
			console.error('加载学生详情失败:', error);
			uni.showToast({
				title: '加载学生详情失败',
				icon: 'none'
			});
		} finally {
			loading.value = false;
		}
	}

	// 加载学生报名课程
	async function loadStudentCourses(studentId) {
		try {
			const enrollmentCloud = uniCloud.importObject('enrollment');
			const enrollments = await enrollmentCloud.getStudentEnrollments(studentId);

			// 获取学生缴费情况
			const paymentCloud = uniCloud.importObject('payment');
			const paymentData = await paymentCloud.getStudentPayments(studentId);

			// 合并报名和缴费数据
			const courseData = paymentData.courses_payments || [];
			courses.value = courseData;

			// 缓存课程名称
			courseData.forEach(item => {
				if (item.course_id && item.course_name) {
					courseNameMap.value[item.course_id] = item.course_name;
				}
			});
		} catch (error) {
			console.error('加载学生课程失败:', error);
			uni.showToast({
				title: '加载学生课程失败',
				icon: 'none'
			});
		}
	}

	// 加载考勤记录
	async function loadAttendance() {
		if (!student.value || !student.value._id) return;

		try {
			const attendanceCloud = uniCloud.importObject('attendance');

			// 只查询已报名课程的考勤记录
			const courseIds = courses.value.map(course => course.course_id);
			if (courseIds.length === 0) {
				attendances.value = [];
				return;
			}

			// 统计各课程的考勤
			let allAttendances = [];
			for (const courseId of courseIds) {
				const result = await attendanceCloud.getStudentAttendance(
					student.value._id,
					courseId, {
						start_date: attendanceQuery.start_date,
						end_date: attendanceQuery.end_date
					}
				);

				if (result && result.list) {
					allAttendances = allAttendances.concat(result.list);
				}
			}

			// 按日期排序
			attendances.value = allAttendances.sort((a, b) => new Date(b.date) - new Date(a.date));

			// 计算考勤统计
			const total = attendances.value.length;
			const present = attendances.value.filter(a => a.status === 1).length;
			const absent = attendances.value.filter(a => a.status === 0).length;
			const leave = attendances.value.filter(a => a.status === 2).length;

			attendanceSummary.total = total;
			attendanceSummary.present = present;
			attendanceSummary.absent = absent;
			attendanceSummary.leave = leave;
			attendanceSummary.presentRate = total > 0 ? Math.round((present / total) * 100) : 0;
		} catch (error) {
			console.error('加载考勤记录失败:', error);
			uni.showToast({
				title: '加载考勤记录失败',
				icon: 'none'
			});
		}
	}

	// 加载缴费记录
	async function loadPayments() {
		if (!student.value || !student.value._id) return;

		try {
			const paymentCloud = uniCloud.importObject('payment');

			// 简化查询，只使用student_id，避免日期范围查询可能导致的格式问题
			const result = await paymentCloud.getPaymentList({
				student_id: student.value._id,
				// 暂时移除日期查询，先确保基本功能正常
				// start_date: paymentQuery.start_date,
				// end_date: paymentQuery.end_date,
				page: 1,
				pageSize: 100
			});

			payments.value = result.list || [];

			// 如果需要按日期过滤，可以在前端完成
			if (paymentQuery.start_date && paymentQuery.end_date) {
				const startDate = new Date(paymentQuery.start_date).getTime();
				const endDate = new Date(paymentQuery.end_date);
				endDate.setHours(23, 59, 59, 999);
				const endDateTime = endDate.getTime();

				// 在前端过滤日期范围
				payments.value = payments.value.filter(item => {
					const paymentDate = new Date(item.payment_date).getTime();
					return paymentDate >= startDate && paymentDate <= endDateTime;
				});
			}

			// 计算缴费统计
			paymentSummary.total_amount = payments.value.reduce((sum, item) => sum + (item.amount || 0), 0);
			paymentSummary.count = payments.value.length;
		} catch (error) {
			console.error('加载缴费记录失败:', error);
			uni.showToast({
				title: '加载缴费记录失败',
				icon: 'none'
			});
		}
	}

	// 滑动切换选项卡
	function onSwiperChange(e) {
		activeTab.value = e.detail.current;
	}

	// 考勤日期筛选
	function onAttendanceStartDateChange(e) {
		attendanceQuery.start_date = e.detail.value;
	}

	function onAttendanceEndDateChange(e) {
		attendanceQuery.end_date = e.detail.value;
	}

	// 缴费日期筛选
	function onPaymentStartDateChange(e) {
		paymentQuery.start_date = e.detail.value;
	}

	function onPaymentEndDateChange(e) {
		paymentQuery.end_date = e.detail.value;
	}

	// 获取课程名称
	function getCourseNameById(courseId) {
		return courseNameMap.value[courseId] || '未知课程';
	}

	// 获取支付方式文本
	function getPaymentMethodText(method) {
		const methodMap = {
			1: '现金',
			2: '微信',
			3: '支付宝',
			4: '银行卡'
		};
		return methodMap[method] || '未知';
	}

	// 编辑学生信息
	function handleEdit() {
		uni.navigateTo({
			url: `/pages/student/edit?id=${student.value._id}`
		});
	}

	// 拨打电话
	function callPhone() {
		if (student.value && student.value.parent_phone) {
			uni.makePhoneCall({
				phoneNumber: student.value.parent_phone
			});
		}
	}

	// 导航到课程详情
	function navigateToCourseDetail(courseId) {
		uni.navigateTo({
			url: `/pages/course/detail?id=${courseId}`
		});
	}

	// 导航到报名页面
	function navigateToEnroll() {
		uni.navigateTo({
			url: `/pages/enrollment/add?student_id=${student.value._id}`
		});
	}

	// 导航到缴费页面
	function navigateToPayment() {
		uni.navigateTo({
			url: `/pages/payment/add?student_id=${student.value._id}`
		});
	}

	// 格式化日期
	function formatDate(date) {
		if (!date) return '';

		const d = new Date(date);
		const year = d.getFullYear();
		const month = String(d.getMonth() + 1).padStart(2, '0');
		const day = String(d.getDate()).padStart(2, '0');

		return `${year}-${month}-${day}`;
	}

	// 格式化日期范围
	function formatDateRange(start, end) {
		if (!start || !end) return '';

		return `${formatDate(start)} 至 ${formatDate(end)}`;
	}

	// 格式化日期字符串
	function formatDateString(date) {
		if (!date) return '';

		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, '0');
		const day = String(date.getDate()).padStart(2, '0');

		return `${year}-${month}-${day}`;
	}

	// 格式化金额
	function formatFee(fee) {
		if (fee === undefined || fee === null) return '0.00元';

		// 将分转换为元
		const yuan = (fee / 100).toFixed(2);
		return `${yuan}元`;
	}
</script>

<style>
	.container {
		padding: 12px;
		background-color: #F8FAFD;
		background-image: linear-gradient(to bottom, #F0F5FF, #F8FAFD);
		min-height: 100vh;
		box-sizing: border-box;
		width: 100%;
		overflow-x: hidden;
	}

	/* 顶部信息卡片 */
	.info-card {
		background: linear-gradient(165deg, #FFFFFF, #FCFDFF);
		border-radius: 16px;
		padding: 24px 22px;
		margin-bottom: 18px;
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04);
		border: 1px solid rgba(233, 236, 239, 0.8);
		position: relative;
		overflow: hidden;
	}
	
	.info-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 6px;
		height: 100%;
		background: linear-gradient(to bottom, #0A6CFF, #0057E3);
		border-top-left-radius: 16px;
		border-bottom-left-radius: 16px;
	}

	.info-card::after {
		content: '';
		position: absolute;
		top: -20px;
		right: -20px;
		width: 130px;
		height: 130px;
		background: radial-gradient(circle at top right, rgba(240, 245, 255, 0.9), rgba(240, 245, 255, 0) 70%);
		opacity: 0.7;
		z-index: 0;
		border-radius: 50%;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 24px;
		padding-bottom: 18px;
		border-bottom: 1px solid rgba(233, 236, 239, 0.9);
		position: relative;
	}

	.card-header::after {
		content: '';
		position: absolute;
		bottom: -1px;
		left: 0;
		width: 60px;
		height: 3px;
		background: linear-gradient(90deg, #0A6CFF, rgba(10, 108, 255, 0.2));
		border-radius: 3px;
		box-shadow: 0 1px 3px rgba(10, 108, 255, 0.1);
	}

	.student-basic {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		position: relative;
		z-index: 1;
		gap: 8px;
		max-width: 70%;
	}

	.student-name {
		font-size: 20px;
		font-weight: 700;
		color: #172B4D;
		letter-spacing: -0.3px;
		word-break: break-all;
		max-width: 100%;
		text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
		line-height: 1.3;
	}

	.student-status {
		font-size: 12px;
		font-weight: 600;
		padding: 5px 12px;
		border-radius: 20px;
		white-space: nowrap;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
		letter-spacing: 0.2px;
	}

	.status-active {
		background: linear-gradient(135deg, rgba(45, 206, 137, 0.15), rgba(45, 206, 137, 0.08));
		color: #2DCE89;
		border: 1px solid rgba(45, 206, 137, 0.3);
		animation: pulse-green 3s infinite ease-in-out;
		position: relative;
		overflow: hidden;
	}

	.status-active::before {
		content: '';
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
		opacity: 0;
		animation: shimmer 4s infinite;
	}

	.status-inactive {
		background: linear-gradient(135deg, rgba(245, 54, 92, 0.15), rgba(245, 54, 92, 0.08));
		color: #F5365C;
		border: 1px solid rgba(245, 54, 92, 0.3);
		position: relative;
		overflow: hidden;
	}

	.status-inactive::before {
		content: '';
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
		opacity: 0;
		animation: shimmer 5s infinite;
	}
	
	.status-paid {
		background-color: rgba(45, 206, 137, 0.08);
		color: #2DCE89;
		border: 1px solid rgba(45, 206, 137, 0.2);
	}
	
	.status-unpaid {
		background-color: rgba(251, 175, 59, 0.08);
		color: #FBAF3B;
		border: 1px solid rgba(251, 175, 59, 0.2);
	}

	.status-partial {
		background-color: rgba(251, 150, 60, 0.08);
		color: #FB963C;
		border: 1px solid rgba(251, 150, 60, 0.2);
	}

	.status-present {
		background-color: rgba(45, 206, 137, 0.08);
		color: #2DCE89;
		border: 1px solid rgba(45, 206, 137, 0.2);
	}

	.status-absent {
		background-color: rgba(245, 54, 92, 0.08);
		color: #F5365C;
		border: 1px solid rgba(245, 54, 92, 0.2);
	}

	.status-leave {
		background-color: rgba(251, 150, 60, 0.08);
		color: #FB963C;
		border: 1px solid rgba(251, 150, 60, 0.2);
	}

	.fee-unpaid {
		background-color: rgba(245, 54, 92, 0.08);
		color: #F5365C;
		border: 1px solid rgba(245, 54, 92, 0.2);
	}

	.fee-paid {
		background-color: rgba(45, 206, 137, 0.08);
		color: #2DCE89;
		border: 1px solid rgba(45, 206, 137, 0.2);
	}

	.actions {
		display: flex;
		justify-content: flex-end;
		padding: 0;
		margin-top: 0;
		position: relative;
		z-index: 1;
	}

	.action-item {
		padding: 10px 18px;
		background: linear-gradient(to bottom, #F9FAFC, #F0F4F8);
		border: 1px solid #E9ECEF;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.25s ease;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
	}

	.action-item:active {
		transform: translateY(2px);
		background: linear-gradient(to bottom, #F0F4F8, #E9EDF2);
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
	}

	.action-item uni-icons {
		margin-right: 8px;
	}

	.action-item text {
		font-size: 14px;
		font-weight: 600;
		color: #4B5563;
	}

	.student-info-wrapper {
		position: relative;
		z-index: 1;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 12px;
		padding: 4px;
		box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.01);
	}

	.info-section {
		position: relative;
		border-radius: 10px;
		overflow: hidden;
	}

	.info-section::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: 120px;
		height: 120px;
		background: radial-gradient(circle at top right, rgba(240, 245, 255, 0.7), rgba(240, 245, 255, 0) 70%);
		opacity: 0.4;
		z-index: 0;
	}

	.info-item {
		display: flex;
		align-items: center;
		margin-bottom: 18px;
		flex-wrap: wrap;
		position: relative;
	}

	.info-item:last-child {
		margin-bottom: 0;
	}

	.info-item:hover uni-icons {
		transform: scale(1.1);
	}

	.info-label {
		font-size: 14px;
		color: #7C8BA1;
		min-width: 85px;
		flex-shrink: 0;
		font-weight: 500;
		position: relative;
	}

	.info-label::after {
		content: '';
		position: absolute;
		bottom: -4px;
		left: 0;
		width: 20px;
		height: 2px;
		background: linear-gradient(90deg, rgba(10, 108, 255, 0.3), rgba(10, 108, 255, 0.1));
		border-radius: 2px;
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.info-item:hover .info-label::after {
		opacity: 1;
	}

	.info-value {
		font-size: 15px;
		color: #1F2937;
		font-weight: 500;
		margin-right: 8px;
		flex: 1;
		word-break: break-all;
		min-width: 0;
		letter-spacing: 0.1px;
	}

	.info-item uni-icons {
		transition: transform 0.25s ease;
		margin-left: 4px;
	}

	/* 选项卡 */
	.tabs {
		display: flex;
		background: linear-gradient(to bottom, #FFFFFF, #FAFBFC);
		border-radius: 14px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
		overflow: hidden;
		margin-bottom: 14px;
		position: relative;
		border: 1px solid rgba(233, 236, 239, 0.8);
		width: 100%;
		box-sizing: border-box;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 14px 0;
		font-size: 14px;
		color: #8993A4;
		position: relative;
		transition: all 0.3s ease;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tab-item.active {
		color: #0A6CFF;
		font-weight: 600;
		background-color: rgba(10, 108, 255, 0.04);
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 28px;
		height: 3px;
		background: linear-gradient(90deg, #0A6CFF, rgba(10, 108, 255, 0.7));
		border-radius: 3px 3px 0 0;
	}

	.tab-item:active {
		background-color: rgba(240, 244, 248, 0.8);
	}

	.content-swiper {
		height: 100%;
		width: 100%;
		flex: 1;
		overflow: hidden;
	}

	.tab-content {
		height: 100%;
		padding: 12px 2px;
		box-sizing: border-box;
	}

	/* 日期筛选区域布局优化 */
	.filter-grid {
		display: grid;
		grid-template-columns: 1fr 20px 1fr 65px;
		gap: 8px;
		align-items: center;
		margin-bottom: 14px;
		padding: 10px 12px;
		background-color: rgba(255, 255, 255, 0.9);
		border-radius: 12px;
		border: 1px solid rgba(233, 236, 239, 0.8);
		width: 100%;
		box-sizing: border-box;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
	}

	.date-picker {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
		padding: 8px 10px;
		border-radius: 10px;
		border: 1px solid #E9ECEF;
		min-width: 0;
		flex: 1;
		transition: all 0.25s ease;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
		height: 36px;
		box-sizing: border-box;
	}

	.date-picker:active {
		background-color: #F8F9FC;
		border-color: #DCE0E5;
		transform: scale(0.98);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
	}

	.date-text {
		font-size: 13px;
		color: #5E6C84;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		flex: 1;
		min-width: 0;
		padding-right: 4px;
		font-weight: 500;
	}

	.date-icon {
		flex-shrink: 0;
		width: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.date-separator {
		margin: 0 2px;
		color: #8993A4;
		font-size: 14px;
		white-space: nowrap;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 20px;
		text-align: center;
		font-weight: 500;
	}

	.filter-button {
		background: linear-gradient(135deg, #0A6CFF, #0057E3);
		color: #FFFFFF;
		font-size: 13px;
		padding: 0 12px;
		border-radius: 10px;
		box-shadow: 0 4px 10px rgba(10, 108, 255, 0.15);
		transition: all 0.25s ease;
		font-weight: 600;
		border: none;
		white-space: nowrap;
		flex-shrink: 0;
		height: 36px;
		line-height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 65px;
		width: 65px;
		/* 固定宽度确保均匀布局 */
		letter-spacing: 0.5px;
	}

	.filter-button:active {
		transform: translateY(1px) scale(0.98);
		background: linear-gradient(135deg, #0057E3, #0048C4);
		box-shadow: 0 2px 6px rgba(10, 108, 255, 0.1);
	}

	/* 课程列表项和其他列表项通用样式 */
	.course-item,
	.attendance-item,
	.payment-item {
		background: linear-gradient(to bottom, #FFFFFF, #FAFBFC);
		padding: 18px;
		margin-bottom: 14px;
		border-radius: 14px;
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.02);
		border: 1px solid rgba(233, 236, 239, 0.7);
		transition: transform 0.25s ease, box-shadow 0.25s ease;
		position: relative;
		overflow: hidden;
	}

	.course-item:active,
	.attendance-item:active,
	.payment-item:active {
		transform: translateY(1px) scale(0.99);
		box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
	}

	.course-item::after,
	.attendance-item::after,
	.payment-item::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 4px;
		height: 100%;
		opacity: 0;
		transition: opacity 0.25s ease;
	}

	.course-item::after {
		background: linear-gradient(to bottom, #0A6CFF, #0057E3);
	}

	.attendance-item::after {
		background: linear-gradient(to bottom, #2DCE89, #26B677);
	}

	.payment-item::after {
		background: linear-gradient(to bottom, #9B59B6, #8E44AD);
	}

	.course-item:active::after,
	.attendance-item:active::after,
	.payment-item:active::after {
		opacity: 1;
	}

	.course-fee {
		font-size: 12px;
		padding: 3px 8px;
		border-radius: 12px;
		font-weight: 500;
	}

	.course-name {
		font-size: 15px;
		font-weight: 600;
		color: #172B4D;
		margin-right: 8px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 70%;
	}

	.course-fee-info {
		display: flex;
		flex-wrap: wrap;
		font-size: 13px;
		color: #8993A4;
		gap: 10px;
	}

	.attendance-date,
	.payment-header {
		flex-wrap: wrap;
		gap: 6px;
	}

	/* 缴费和考勤信息布局 */
	.payment-amount {
		gap: 10px;
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10px;
	}

	.payment-amount text,
	.attendance-summary text {
		flex: 1;
		min-width: 120px;
	}

	/* 空状态 */
	.empty-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 24px 0;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(250, 252, 255, 0.9));
		border-radius: 16px;
		margin: 4px 0 16px 0;
		border: 1.5px solid rgba(233, 236, 239, 0.8);
		min-height: 140px;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.02);
		position: relative;
		overflow: hidden;
	}

	.empty-content::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 3px;
		background: linear-gradient(to right, rgba(10, 108, 255, 0.3), rgba(155, 89, 182, 0.3));
		opacity: 0.6;
	}

	.empty-image {
		width: 80px;
		height: 80px;
		margin-bottom: 12px;
		opacity: 0.5;
		filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.08));
		transition: all 0.3s ease;
	}

	.empty-content text {
		font-size: 15px;
		color: #7C8BA1;
		margin-bottom: 10px;
		font-weight: 500;
		letter-spacing: -0.2px;
		text-align: center;
		padding: 0 20px;
		line-height: 1.5;
	}

	.action-button {
		background: linear-gradient(135deg, #0A6CFF, #0057E3);
		color: #FFFFFF;
		font-size: 14px;
		font-weight: 500;
		padding: 8px 24px;
		border-radius: 22px;
		box-shadow: 0 6px 16px rgba(10, 108, 255, 0.2);
		transition: all 0.25s ease;
		margin-top: 8px;
		position: relative;
		overflow: hidden;
	}

	.action-button::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3), transparent 70%);
		opacity: 0;
		transition: opacity 0.25s ease;
	}

	.action-button:active {
		transform: scale(0.96) translateY(2px);
		box-shadow: 0 3px 8px rgba(10, 108, 255, 0.15);
		background: linear-gradient(135deg, #0057E3, #0048C4);
	}

	.action-button:active::after {
		opacity: 1;
	}

	/* 考勤记录 */
	.attendance-list {
		padding-bottom: 20px;
	}

	.attendance-item {
		background: linear-gradient(to bottom, #FFFFFF, #FAFBFC);
		padding: 16px;
		margin-bottom: 12px;
		border-radius: 12px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
		border: 1px solid rgba(233, 236, 239, 0.7);
		position: relative;
	}

	.attendance-date {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		flex-wrap: wrap;
		gap: 8px;
	}

	.attendance-date text:first-child {
		font-size: 15px;
		font-weight: 600;
		color: #172B4D;
	}

	.attendance-status {
		font-size: 12px;
		padding: 3px 10px;
		border-radius: 12px;
		font-weight: 600;
	}

	.attendance-course {
		font-size: 14px;
		color: #5E6C84;
		margin-bottom: 8px;
	}

	.attendance-remarks {
		font-size: 13px;
		color: #7C8BA1;
		background-color: rgba(247, 250, 252, 0.6);
		padding: 8px 10px;
		border-radius: 8px;
		border: 1px solid rgba(233, 236, 239, 0.9);
		margin-top: 8px;
	}

	.attendance-summary {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background: linear-gradient(to bottom, #FBFDFF, #F5F8FC);
		padding: 18px;
		border-radius: 14px;
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.01);
		border: 1px solid rgba(233, 236, 239, 0.8);
		margin-top: 18px;
		margin-bottom: 24px;
		gap: 12px;
	}

	.attendance-summary text {
		font-size: 14px;
		color: #5E6C84;
		padding: 8px 12px;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 10px;
		border: 1px solid rgba(233, 236, 239, 0.9);
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		min-width: 100px;
		font-weight: 500;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
		transition: all 0.25s ease;
	}

	.attendance-summary text:hover {
		transform: translateY(-1px);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
		border-color: rgba(10, 108, 255, 0.2);
	}

	/* 缴费记录 */
	.payment-list {
		padding-bottom: 20px;
	}

	.payment-item {
		background: linear-gradient(to bottom, #FFFFFF, #FAFBFC);
		padding: 16px;
		margin-bottom: 12px;
		border-radius: 12px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
		border: 1px solid rgba(233, 236, 239, 0.7);
		position: relative;
	}

	.payment-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		flex-wrap: wrap;
		gap: 8px;
	}

	.payment-date {
		font-size: 15px;
		font-weight: 600;
		color: #172B4D;
	}

	.payment-status {
		font-size: 12px;
		padding: 3px 10px;
		border-radius: 12px;
		font-weight: 600;
	}

	.payment-course {
		font-size: 14px;
		color: #5E6C84;
		margin-bottom: 8px;
	}

	.payment-period {
		font-size: 13px;
		color: #7C8BA1;
		margin-bottom: 8px;
		background-color: rgba(247, 250, 252, 0.6);
		padding: 8px 10px;
		border-radius: 8px;
		border: 1px solid rgba(233, 236, 239, 0.9);
	}

	.payment-remarks {
		font-size: 13px;
		color: #8993A4;
	}

	.payment-summary {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background: linear-gradient(to bottom, #FBFDFF, #F5F8FC);
		padding: 18px;
		border-radius: 14px;
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.01);
		border: 1px solid rgba(233, 236, 239, 0.8);
		margin-top: 18px;
		margin-bottom: 24px;
		gap: 12px;
	}

	.payment-summary text {
		font-size: 14px;
		color: #5E6C84;
		padding: 8px 12px;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 10px;
		border: 1px solid rgba(233, 236, 239, 0.9);
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		min-width: 100px;
		font-weight: 500;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
		transition: all 0.25s ease;
	}

	.payment-summary text:hover {
		transform: translateY(-1px);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
		border-color: rgba(10, 108, 255, 0.2);
	}

	/* 响应式适配优化 */
	@media screen and (max-width: 350px) {
		.info-card {
			padding: 18px 16px;
			margin-bottom: 14px;
		}

		.card-header {
			flex-direction: column;
			margin-bottom: 16px;
			padding-bottom: 14px;
		}

		.student-basic {
			max-width: 100%;
			margin-bottom: 12px;
		}

		.student-name {
			font-size: 18px;
			max-width: 100%;
		}

		.actions {
			width: 100%;
			justify-content: flex-start;
		}

		.action-item {
			padding: 8px 14px;
		}

		.info-label {
			min-width: 75px;
			font-size: 13px;
		}

		.info-value {
		font-size: 14px;
		}

		.course-item,
		.attendance-item,
		.payment-item {
			padding: 14px 12px;
		}

		.info-item {
			flex-direction: column;
			align-items: flex-start;
			margin-bottom: 10px;
		}

		.payment-amount,
		.attendance-summary,
		.payment-summary {
			flex-direction: column;
			padding: 14px;
		}

		.attendance-summary text,
		.payment-summary text {
			width: 100%;
			margin-bottom: 8px;
			padding: 8px;
		}

		.filter-grid {
			padding: 8px;
			gap: 4px;
			grid-template-columns: 1fr 16px 1fr 50px;
		}

		.date-picker {
			padding: 6px 8px;
			height: 32px;
		}

		.date-text {
		font-size: 12px;
	}

		.date-separator {
			width: 16px;
		font-size: 12px;
		}

		.filter-button {
			padding: 0 6px;
			font-size: 12px;
			height: 32px;
			line-height: 32px;
			min-width: 50px;
			width: 50px;
		}
	}

	/* 添加脉冲动画效果 */
	@keyframes pulse-green {
		0% {
			box-shadow: 0 0 0 0 rgba(45, 206, 137, 0.4);
		}

		70% {
			box-shadow: 0 0 0 6px rgba(45, 206, 137, 0);
		}

		100% {
			box-shadow: 0 0 0 0 rgba(45, 206, 137, 0);
		}
	}

	@keyframes shimmer {
		0% {
			opacity: 0;
			transform: rotate(0deg);
		}

		20% {
			opacity: 0.3;
		}

		40% {
			opacity: 0;
		}

		100% {
			opacity: 0;
			transform: rotate(360deg);
		}
	}

	/* 电话图标悬停效果 */
	.phone-icon {
		margin-left: 10px;
		cursor: pointer;
		padding: 6px;
		border-radius: 50%;
		transition: all 0.3s ease;
		background: linear-gradient(135deg, rgba(22, 160, 133, 0.1), rgba(22, 160, 133, 0.05));
		border: 1px solid rgba(22, 160, 133, 0.2);
		box-shadow: 0 2px 5px rgba(22, 160, 133, 0.08);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.phone-icon:active {
		background-color: rgba(22, 160, 133, 0.15);
		transform: scale(1.1) rotate(10deg);
	}

	/* 编辑按钮样式优化 */
	.edit-button {
		position: relative;
		overflow: hidden;
	}

	.edit-button::after {
		content: '';
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.edit-button:active::after {
		opacity: 1;
	}

	@media screen and (max-width: 320px) {
		.filter-grid {
			grid-template-columns: 1fr 12px 1fr 46px;
			gap: 3px;
			padding: 6px;
		}

		.date-picker {
			padding: 5px 4px;
		}

		.date-separator {
			width: 12px;
		}

		.filter-button {
			width: 46px;
			min-width: 46px;
			font-size: 11px;
		}

		.empty-content {
			padding: 16px 0;
			min-height: 120px;
		}

		.empty-image {
			width: 70px;
			height: 70px;
			margin-bottom: 10px;
		}

		.info-card::after {
			width: 100px;
			height: 100px;
		}

		.student-name {
			font-size: 16px;
		}

		.card-header::after {
			width: 40px;
		}

		.grade-class-row,
		.parent-info-row {
			flex-direction: column;
			padding: 10px;
		}

		.grade-class-item,
		.parent-info-item {
			margin-bottom: 12px;
		}

		.grade-class-item:last-child,
		.parent-info-item:last-child {
			margin-bottom: 0;
		}

		.grade-tag,
		.class-tag,
		.parent-name-tag,
		.parent-phone-tag {
			padding: 4px 10px;
			font-size: 13px;
		}
	}

	/* 年级标签和班级标签样式 */
	.grade-tag {
		font-size: 14px;
		color: #0A6CFF;
		background: linear-gradient(135deg, rgba(10, 108, 255, 0.1), rgba(10, 108, 255, 0.04));
		padding: 5px 14px;
		border-radius: 12px;
		border: 1px solid rgba(10, 108, 255, 0.2);
		font-weight: 600;
		display: inline-block;
		box-shadow: 0 2px 5px rgba(10, 108, 255, 0.08);
		letter-spacing: 0.2px;
		transition: all 0.25s ease;
	}

	.class-tag {
		font-size: 14px;
		color: #9B59B6;
		background: linear-gradient(135deg, rgba(155, 89, 182, 0.1), rgba(155, 89, 182, 0.04));
		padding: 5px 14px;
		border-radius: 12px;
		border: 1px solid rgba(155, 89, 182, 0.2);
		font-weight: 600;
		display: inline-block;
		box-shadow: 0 2px 5px rgba(155, 89, 182, 0.08);
		letter-spacing: 0.2px;
		transition: all 0.25s ease;
	}

	.grade-tag:active,
	.class-tag:active {
		transform: scale(0.97);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	}

	.grade-class-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
		background: linear-gradient(to right, rgba(250, 252, 255, 0.5), rgba(245, 248, 255, 0.5));
		padding: 14px 16px;
		border-radius: 14px;
		box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
		border: 1px solid rgba(233, 236, 239, 0.7);
	}

	.grade-class-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		flex: 1;
	}

	.grade-class-item .info-label {
		margin-bottom: 10px;
		color: #64748B;
		font-size: 13px;
	}

	.grade-class-item .info-value {
		width: 100%;
	}

	.parent-info-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
		background: linear-gradient(to right, rgba(249, 252, 255, 0.5), rgba(243, 248, 255, 0.5));
		padding: 14px 16px;
		border-radius: 14px;
		box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
		border: 1px solid rgba(233, 236, 239, 0.7);
	}

	.parent-info-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		flex: 1;
	}

	.parent-info-item .info-label {
		margin-bottom: 10px;
		color: #64748B;
		font-size: 13px;
	}

	.parent-info-item .info-value {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.phone-value {
		display: flex;
		align-items: center;
	}

	.phone-icon {
		margin-left: 5px;
	}

	/* 家长姓名和联系电话标签样式 */
	.parent-name-tag {
		font-size: 14px;
		color: #3498DB;
		background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(52, 152, 219, 0.04));
		padding: 5px 14px;
		border-radius: 12px;
		border: 1px solid rgba(52, 152, 219, 0.2);
		font-weight: 600;
		display: inline-block;
		box-shadow: 0 2px 5px rgba(52, 152, 219, 0.08);
		letter-spacing: 0.2px;
		transition: all 0.25s ease;
	}

	.parent-phone-tag {
		font-size: 14px;
		color: #16A085;
		background: linear-gradient(135deg, rgba(22, 160, 133, 0.1), rgba(22, 160, 133, 0.04));
		padding: 5px 14px;
		border-radius: 12px;
		border: 1px solid rgba(22, 160, 133, 0.2);
		font-weight: 600;
		display: inline-block;
		box-shadow: 0 2px 5px rgba(22, 160, 133, 0.08);
		letter-spacing: 0.2px;
		transition: all 0.25s ease;
		margin-right: 10px;
	}

	.parent-name-tag:active,
	.parent-phone-tag:active {
		transform: scale(0.97);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	}
</style>